<template>
    <div class="manage-container">
        <div class="cont">
            <div class="search-box">
                <el-form inline>
                    <el-form-item label="科室名称">
                        <el-input v-model="name" placeholder="输入科室名称" prefix-icon="el-icon-search" size="mini">
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="handleSearch" type="primary" icon="el-icon-search" size="mini">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div>
                <el-button @click="batchDelIds.length>=1?showBatchDel = true:showBatchDel = false" class="del-btn" size="mini">删除选中</el-button>
            </div>
        </div>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="id" label="科室编号">
            </el-table-column>
            <el-table-column label="创建时间">
                <template slot-scope="{row}">
                    {{ row.createtime | format(row.createtime) }}
                </template>
            </el-table-column>
            <el-table-column prop="name" label="科室名称">
            </el-table-column>
            <el-table-column prop="maindoctor" label="科室主任">
            </el-table-column>
            <el-table-column label="科室操作">
                <template slot-scope="{row}">
                    <i @click="handleDel(row)" class="el-icon-delete" style="margin-right:10px;color:#66b1ff"></i>
                    <i @click="handleEdit(row)" class="el-icon-edit" style="color:#66b1ff"></i>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
            :page-sizes="[10, 15, 20, 25]" :page-size="size" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
        <el-dialog title="编辑科室" :visible.sync="showEdit">
            <el-form :model="editForm" label-width="80px">
                <el-form-item label="科室名称">
                    <el-input v-model="editForm.name" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="科室主任">
                    <el-select v-model="editForm.maindoctor" size="mini">
                        <el-option v-for="item in directors" :key="item.name" :label="item.name" :value="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-input v-model="editForm.createtime" size="mini" disabled></el-input>
                </el-form-item>
                <el-form-item label="科室编号">
                    <el-input v-model="editForm.id" size="mini" disabled></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showEdit = false" style="background:#728cb2;color:#fff" size="mini">取 消</el-button>
                <el-button type="primary" @click="handleConfirmEdit" size="mini">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="系统提示" :visible.sync="showDel" width="30%">
            <span>你正在进行科室删除操作，此操作不可逆，确定要删除对应科室吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleConfirmDel" size="mini">确定删除</el-button>
                <el-button @click="showDel = false" style="background:#728cb2;color:#fff" size="mini">取 消</el-button>
            </span>
        </el-dialog>
        <el-dialog title="系统提示" :visible.sync="showBatchDel" width="30%">
            <span>你正在进行批量科室删除操作，此操作不可逆，确定要删除对应科室吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleConfirmBatchDel" size="mini">确定删除</el-button>
                <el-button @click="showBatchDel = false" style="background:#728cb2;color:#fff" size="mini">取 消
                </el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { api_department_list, api_department_edit, api_department_del, api_department_search, api_department_batchdel } from '@/apis/hospitalController';
import formatTime from "@/utils/formatTime";
export default {
    data() {
        return {
            name: "",
            page: 1,
            size: 10,
            total: 10,
            showEdit: false,
            showDel: false,
            showBatchDel: false,
            delId: 0,
            batchDelIds: [],
            editForm: {
                createtime: "2022-11-20T16:00:00.000Z",
                id: 17,
                maindoctor: "张智",
                name: "呼吸内科"
            },
            tableData: [{
                createtime: "2022-11-20T16:00:00.000Z",
                id: 17,
                maindoctor: "张智",
                name: "呼吸内科"
            }],
            directors: [{ id: 1, name: "张智" }]
        }
    },
    created() {
        this.getDepartmentList()
    },
    filters: {
        format(val) {
            return formatTime(val)
        }
    },
    methods: {
        // 获取科室列表
        async getDepartmentList() {
            let res = await api_department_list({ page: this.page, size: this.size })
            this.tableData = res.data.data
            this.total = res.data.total
        },
        //复选框状态改变
        handleSelectionChange(val) {
            this.batchDelIds = val.map(item => item.id)
        },
        // 批量删除选中
        handleConfirmBatchDel() {
            let ids = JSON.stringify(this.batchDelIds)
            api_department_batchdel({ ids })
            this.getDepartmentList()
            this.showBatchDel = false
        },
        // 每页条数改变
        handleSizeChange(val) {
            this.size = val
            this.getDepartmentList()
        },
        // 切换当前页
        handleCurrentChange(val) {
            this.page = val
            this.getDepartmentList()
        },
        // 删除
        handleDel(row) {
            this.showDel = true
            this.delId = row.id
        },
        // 确认删除
        handleConfirmDel() {
            this.showDel = false
            // console.log(this.delId);
            api_department_del({ id: this.delId })
            this.getDepartmentList()
        },
        // 编辑
        handleEdit(row) {
            this.showEdit = true;
            this.editForm = { ...row }
        },
        // 确认编辑
        handleConfirmEdit() {
            this.showEdit = false;
            api_department_edit(this.editForm)
            this.getDepartmentList()
        },
        //查询
        async handleSearch() {
            let res = await api_department_search({ page: this.page, size: this.size, name: this.name })
            this.tableData = res.data.data
        }
    }
}
</script>

<style lang="less" scoped>
.manage-container {
    width: 100%;
    height: 100%;

    .cont {
        width: 100%;
        display: flex;
        justify-content: space-between;

        .search-box {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .el-input {
                width: 200px;
            }
        }
    }

    .el-table {
        border: 1px solid #eee;

        th.el-table__cell {

            background-color: #f2f6fc;

        }
    }

    .el-pagination {
        margin-top: 20px;
    }
}
</style>